<template>
  <div style="margin-left: 14%">
    <!-- 试品元件配置页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>气体类型配置
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <div class="info">
        <el-card class="box-card">
            <el-row>
            <el-button class="addBtn global_add" @click="addDalog" :disabled="btnList.add" style="float:right; margin-right: 15px;margin-bottom: 5px;" type="text">+&nbsp;新增气体类型</el-button>
            </el-row>
            <el-table stripe border :data="testGjbList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
                <el-table-column align="center" prop="gas_kind" label="气体类型名称">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button class="global_edit" type="text" @click="editProduct(scope.row)" size="small" :disabled="btnList.edit">编辑</el-button>
                        <el-button class="global_delete" type="text" @click="deleteProduct(scope.row)" style="color: red" size="small" :disabled="btnList.delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin:20px 0 20px 0; float: right;" class="pagination" background :current-page.sync="currentPage" hide-on-single-page :page-size="pagesize" layout="prev, pager, next" :total="testGjbList.length"></el-pagination>
        </el-card> 
    </div>
    <!-- 新增弹出框 -->
    <el-dialog title="新增气体类型" :visible.sync="addDialogVisible" width="450px">
        <el-form :model="form" ref="addForm" :rules="rules"  size="small">
            <el-form-item label="气体类型" label-width="120px" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入气体类型" style="width:90%" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button class="textBtn" @click="cancel"  size="small">取 消</el-button>
            <el-button type="primary" @click="define"  size="small">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑气体类型" :visible.sync="editDialogVisible" width="450px">
        <el-form :model="form" ref="editForm" :rules="rules" size="small">
            <el-form-item label="气体类型" label-width="120px" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入气体类型" style="width:90%" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button class="textBtn" @click="editCancel" size="small">取 消</el-button>
            <el-button type="primary" @click="editDefine" size="small">确 定</el-button>
        </div>
    </el-dialog>
  </div>   
</template>

<script>
import roleBtn from '../../public/means'
export default {
    data() {
    //     var validateTestGjb = function (rule, value, callback) {
    //         // console.log(rule, value, callback);
    //         // console.log(value);
    //         console.log(this);
    //     let reg = /^[A-Za-z0-9\u4e00-\u9fa5]{0,}$/
    //     if(!reg.test(value)){
    //         callback(new Error('试验标准依据不能包含汉字和特殊字符！'));
    //     }
    //     callback();
    //   }
        return{
          btnList: {
            add: false,
            edit: false,
            delete: false
          },
          currentPage: 1,
          pagesize: 10,
          uuid: '',
          menu_id: 32,
          testGjbList: [],
          addDialogVisible: false,
          editDialogVisible: false,
          form: {
              name: ''
          },
           rules: {
              name: [
                  { required: true, message: '请输入气体类型', trigger: 'blur' },
                //   { validator: validateTestGjb, trigger: 'blur' }
              ]
          }
        }
    },
    methods: {
        // 获取试验标准数据
        async getTypeGas() {
            const { result } = await this.$http.get('/productUnit/getTypeGas')
            this.testGjbList = result
        },
        editProduct(row) {
            this.editDialogVisible = true
            this.form.name = row.gas_kind
            this.uuid = row.gas_id
        },
        async deleteProduct(row) {
            const confirm = await this.$confirm('此操作将永久删除该气体类型, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err);
            if(confirm !== 'confirm'){
                return this.$message('已取消删除！')
            }
            const res = await this.$http.delete(`/productUnit/deletebyIdTypeGas?gas_id=${row.gas_id}`).catch(err=>err)
            if(res.code !== 200) {
                return
            }
            this.$message.success(res.message)
            const index = this.testGjbList.indexOf(row) // 接口调用后手动删除数组中该元素
            this.testGjbList.splice(index,1)
        },
        addDalog() {
            this.addDialogVisible = true
        },
        cancel() {
          this.$refs.addForm.resetFields()
          this.addDialogVisible = false
          this.form.name = ''  
        },
        editCancel() {
          this.$refs.editForm.resetFields()
          this.editDialogVisible = false
          this.form.name = ''
        },
        async editDefine() {
            this.$refs.editForm.validate(async valid => {
              console.log(valid);
              if(!valid) {
                  return
              }
            const res = await this.$http.post('/productUnit/putTypeGas',{gas_id: this.uuid, gas_kind: this.form.name}).catch(err=>err)
            if(res.code !== 200) {
                return
            }
            this.$message.success(res.message)
            this.testGjbList.forEach(item => {
                if(item.gas_id === this.uuid) {
                    item.gas_kind = this.form.name
                }
            })
            this.$refs.editForm.resetFields()
            this.editDialogVisible = false
            this.form.name = ''
           })
        },
        define() {
          this.$refs.addForm.validate(async valid => {
              console.log(valid);
              if(!valid) {
                  return
              }
              const res = await this.$http.post('/productUnit/addTypeGas', {gas_kind: this.form.name}).catch(err=>err)
                if(res.code !== 200) {
                    return
                }
                this.testGjbList.splice((this.currentPage-1)*this.pagesize, 0, res.result)
                this.$message.success(res.message)
                this.$refs.addForm.resetFields()
                this.addDialogVisible = false
                this.form.name = ''
          })
          
        }
    },
    async created() {
        const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
        this.getTypeGas()
        if(role_id){
        // 获取按钮权限状态
            let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
            this.btnList = arr
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./TypeGas.scss";
</style>